/* =========================================================
   BRAND COLORS
========================================================= */

:root {

  --brand-blue: #236192;
  --brand-blue-dark: #102f4d;

  --brand-red: #6f263d;
  --brand-red-dark: #501c2d;

  --dark-bg: #221f1f;

  --games-bg: #edf3f8;

  --white: #ffffff;
  --black: #000000;

}


/* =========================================================
   PAGE RESET
========================================================= */

html,
body {

  margin: 0;
  padding: 0;

  overflow-x: hidden;

  min-height: 100%;

}


body {

  background-color: var(--white);

}


/* =========================================================
   HEADER
========================================================= */

header {

  background-color: var(--brand-blue);

}


header img {

  display: block;

  width: 100%;

  border-bottom: 5px solid var(--brand-red);

}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
h4 {

  color: var(--brand-red);

  font-weight: bold;

}


h1 {

  font-size: 4rem;

}


h2 {

  font-size: 2.25rem;

}


h3,
h4 {

  font-size: 2rem;

}


.section-title {

  color: var(--brand-blue);

  margin-bottom: 1rem;

  font-weight: bold;

}


hr {

  border: 0;

  border-top: 2px solid var(--brand-red);

  margin: 0;

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

  background-color: var(--black) !important;

  padding: 0.75rem 1rem;

}


.navbar .navbar-brand img {

  height: 50px;

}


.navbar .navbar-brand + img {

  height: 30px;

}


.navbar-nav {

  gap: 1rem;

  align-items: center;

  flex-wrap: wrap;

}


.navbar-toggler-icon {

  width: 1.5em;

  height: 1.5em;

  background-image: url('https://kseblobstorage.blob.core.windows.net/sitefiles/Avalanchetix/menu.png') !important;

}


.nav-link,
.nav-link-custom {

  color: var(--white) !important;

  font-weight: 600;

  font-size: 0.95rem;

  text-transform: uppercase;

  white-space: nowrap;

  padding: 0.5rem 0.75rem;

  transition:
    color .2s ease-in-out,
    background-color .2s ease-in-out;

  border-radius: 4px;

}


.nav-link:hover,
.nav-link:focus,
.nav-link-custom:hover,
.nav-link-custom:focus {

  color: var(--white) !important;

  background-color: var(--brand-blue);

}


.nav-link-custom.active {

  background-color: var(--brand-blue);

  color: var(--white) !important;

}


.dropdown-menu {

  background-color: var(--black);

  border: none;

  border-radius: 4px;

  padding: 0.5rem 0;

}


.dropdown-item {

  color: var(--white);

  font-weight: 500;

  padding: 0.5rem 1.25rem;

  transition:
    background-color .2s,
    color .2s;

}


.dropdown-item:hover {

  background-color: #222;

  color: var(--brand-blue);

}


.navbar-light {

  background-color: var(--black) !important;

}


/* =========================================================
   GAME SECTION
========================================================= */

.games-wrapper {

  width: 100%;

  padding: 55px 0 65px;

  background:
    linear-gradient(
      180deg,
      #f4f8fb 0%,
      #e7eef5 100%
    );

}


/* =========================================================
   GAME CARDS
========================================================= */

.game-card {

  background-color: var(--white);

  border: 0;

  border-top: 5px solid var(--brand-red);

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 8px 25px rgba(16, 47, 77, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.game-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 16px 35px rgba(16, 47, 77, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.07);

}


.game-card .card-img-top {

  width: 100%;

  height: auto;

  display: block;

}


.game-card .card-body {

  padding: 1.5rem 1.5rem 1.6rem;

}


/* =========================================================
   GAME INFORMATION
========================================================= */

.game-date {

  margin: 0 0 0.35rem;

  font-size: 1.15rem;

  line-height: 1.3;

  font-weight: 700;

  color: #242424;

}


.game-opponent {

  margin: 0;

  font-size: 1.55rem;

  line-height: 1.2;

  font-weight: 800;

  color: var(--brand-blue-dark);

}


.game-time {

  margin: 0.7rem 0 1.25rem;

  font-size: 1.05rem;

  line-height: 1.2;

  font-style: italic;

  color: #5d6470;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {

  background-color: var(--brand-red) !important;

  border-color: var(--brand-red) !important;

  color: var(--white) !important;

}


.btn-primary:hover,
.btn-primary:focus {

  background-color: var(--brand-red-dark) !important;

  border-color: var(--brand-red-dark) !important;

}


.game-card .btn {

  width: 100%;

  padding: 0.7rem 1rem;

  border-radius: 8px;

  font-size: 1.05rem;

  font-weight: 600;

}


/* =========================================================
   CONTACT SECTION
========================================================= */

#contact-us-section {

  padding-top: 50px;

  padding-bottom: 50px;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  background-color: var(--dark-bg);

  color: var(--white);

  padding-top: 25px;

  padding-bottom: 25px;

  margin-bottom: 0;

}


.footer-link {

  color: var(--white);

  text-decoration: none;

  transition: color .3s;

}


.footer-link:hover {

  color: #7eb9e6;

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 10px;

  font-size: 1.5rem;

  color: var(--white);

  text-decoration: none;

  transition:
    color .3s,
    transform .3s;

}


.social-icon:hover {

  color: #7eb9e6;

  transform: scale(1.15);

}


.social-icon i,
.social-icon svg {

  display: block;

  width: 1.5rem;

  height: 1.5rem;

  vertical-align: middle;

}


.social-icon svg {

  fill: currentColor;

  position: relative;

  top: 7px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

  .navbar-nav {

    gap: 0.5rem;

    align-items: flex-start;

  }


  .navbar .navbar-brand img {

    height: 40px;

  }


  .navbar .navbar-brand + img {

    height: 26px;

  }

}


@media (max-width: 767.98px) {

  .games-wrapper {

    padding: 35px 0 45px;

  }


  .game-card .card-body {

    padding: 1.35rem 1.25rem 1.4rem;

  }


  .game-date {

    font-size: 1.1rem;

  }


  .game-opponent {

    font-size: 1.4rem;

  }


  .game-time {

    font-size: 1rem;

  }

}


/* =========================================================
   HOMETOWN REMIX ADDITIONS
   NEW CSS STARTS HERE

   ALL NEW RULES ARE SCOPED TO:
   .htr-games-page
========================================================= */


/* =========================================================
   HOMETOWN REMIX DESIGN VARIABLES
========================================================= */

.htr-games-page {

  --htr-navy: #071a30;
  --htr-navy-light: #10385c;
  --htr-blue: #236192;
  --htr-ice: #a6dfff;
  --htr-frost: #e8f5ff;
  --htr-white: #ffffff;
  --htr-silver: #a2aaad;

  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--htr-navy);

}

.htr-games-page,
.htr-games-page *,
.htr-games-page *::before,
.htr-games-page *::after {

  box-sizing: border-box;

}


/* =========================================================
   COMPACT EDITORIAL HERO
========================================================= */

.htr-games-page .htr-hero {

  position: relative;
  overflow: hidden;

  padding: clamp(24px, 3.5vw, 52px) 0;

  background:
    radial-gradient(
      ellipse at 80% 0%,
      rgba(35,97,146,.42),
      transparent 52%
    ),
    linear-gradient(
      125deg,
      #071a30 0%,
      #10385c 62%,
      #071a30 100%
    );

  border-bottom: 5px solid var(--htr-blue);

}

.htr-games-page .htr-hero::before {

  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      132deg,
      transparent 0,
      transparent 68px,
      rgba(255,255,255,.045) 69px,
      transparent 70px
    );

}

.htr-games-page .htr-hero-inner {

  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;

  gap: clamp(22px, 3.5vw, 52px);

  width: min(1500px, calc(100% - 32px));
  margin-inline: auto;

}

.htr-games-page .htr-hero-copy {

  min-width: 0;

}

.htr-games-page .htr-hero-eyebrow {

  margin: 0 0 16px;

  color: var(--htr-ice);

  font-size: .75rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;

}

.htr-games-page .htr-hero-title {

  margin: 0 0 20px;

  color: var(--htr-white) !important;

  font-family:
    "Arial Black",
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(2.6rem, 9.5vw, 5.8rem);
  line-height: .93;
  letter-spacing: -.065em;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;

}

.htr-games-page .htr-hero-title span {

  display: block;
  color: var(--htr-ice);

}

.htr-games-page .htr-hero-description {

  max-width: 490px;
  margin: 0;

  color: var(--htr-frost);

  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.65;

}

.htr-games-page .htr-hero-visual {

  min-width: 0;
  margin: 0;
  overflow: hidden;

  background: var(--htr-navy);
  border: 1px solid rgba(166,223,255,.35);
  border-radius: 12px;

  box-shadow: 0 18px 48px rgba(0,0,0,.26);

}

.htr-games-page .htr-hero-visual img {

  display: block;
  width: 100%;
  height: auto;

}

.htr-games-page .htr-hero-bottom {

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 10px;

  margin-top: 22px;

}

.htr-games-page .htr-hero-tag {

  display: inline-flex;
  align-items: center;

  min-height: 32px;
  padding: 7px 12px;

  border: 1px solid rgba(166,223,255,.38);
  border-radius: 50px;

  color: var(--htr-ice);

  background: rgba(255,255,255,.05);

  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;

}


/* =========================================================
   GAME SECTION INTRODUCTION
========================================================= */

.htr-games-page .games-wrapper {

  background:
    radial-gradient(
      ellipse at 90% 0%,
      rgba(35,97,146,.10),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #e8f5ff 0%,
      #f4f8fb 45%,
      #e7eef5 100%
    );

}

.htr-games-page .htr-section-intro {

  width: min(1100px, calc(100% - 32px));
  margin: 0 auto clamp(32px, 4vw, 55px);

  text-align: center;

}

.htr-games-page .htr-section-eyebrow {

  margin: 0 0 12px;

  color: var(--htr-blue);

  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;

}

.htr-games-page .htr-section-title {

  margin: 0 0 15px;

  color: var(--htr-navy) !important;

  font-size: clamp(2.3rem, 5.5vw, 5.1rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;

}

.htr-games-page .htr-section-title span {

  color: var(--htr-blue);

}

.htr-games-page .htr-section-description {

  max-width: 700px;
  margin: 0 auto;

  color: var(--htr-navy);

  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;

}


/* =========================================================
   HOMETOWN REMIX GAME CARD POLISH
========================================================= */

.htr-games-page .game-card {

  border-top-color: var(--htr-blue);
  border-radius: 14px;

}

.htr-games-page .game-card .card-img-top {

  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid rgba(35,97,146,.15);

}

.htr-games-page .game-card .card-body {

  text-align: left;
  background: var(--htr-white);

}

.htr-games-page .htr-game-meta {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  gap: 8px;

  margin-bottom: 18px;

}

.htr-games-page .htr-game-number {

  color: var(--htr-blue);

  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;

}

.htr-games-page .htr-game-badge {

  display: inline-flex;
  align-items: center;

  padding: 6px 10px;
  border-radius: 50px;

  background: var(--htr-frost);
  color: var(--htr-blue);

  font-size: .68rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;

}

.htr-games-page .htr-game-badge--away {

  background: rgba(111,38,61,.10);
  color: var(--brand-red);

}

.htr-games-page .game-date {

  font-size: clamp(1rem, 1.3vw, 1.12rem);

}

.htr-games-page .game-opponent {

  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  color: var(--htr-navy);
  text-wrap: balance;

}

.htr-games-page .game-time {

  margin: 10px 0 20px;

  color: var(--htr-blue);
  font-style: normal;
  font-weight: 800;

}

.htr-games-page .htr-card-footer {

  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(35,97,146,.14);

}

.htr-games-page .game-card .btn-primary {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;

  padding: 14px 17px;
  border-radius: 7px;

  background: var(--htr-blue) !important;
  border-color: var(--htr-blue) !important;

  color: var(--htr-white) !important;

  font-weight: 800;
  text-decoration: none;

}

.htr-games-page .game-card .btn-primary:hover,
.htr-games-page .game-card .btn-primary:focus {

  background: var(--htr-navy) !important;
  border-color: var(--htr-navy) !important;
  color: var(--htr-white) !important;

}

.htr-games-page .htr-button-arrow {

  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;

}

.htr-games-page .htr-away-note {

  margin: 10px 0 0;

  color: #5d6470;
  font-size: .78rem;
  line-height: 1.5;

}


/* =========================================================
   NO UPCOMING GAMES STATE
========================================================= */

.htr-games-page .htr-empty-state {

  max-width: 800px;
  margin: 20px auto 0;

  padding: clamp(28px, 5vw, 55px);

  background: #ffffff;
  border: 1px solid rgba(35,97,146,.18);
  border-top: 5px solid var(--htr-blue);
  border-radius: 14px;

  text-align: center;

}

.htr-games-page .htr-empty-state h3 {

  margin: 0 0 12px;

  color: var(--htr-navy);

  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;

}

.htr-games-page .htr-empty-state p {

  margin: 0;
  line-height: 1.6;

}


/* =========================================================
   HOMETOWN REMIX CONTACT SECTION
========================================================= */

.htr-games-page #contact-us-section {

  background: #ffffff;

}

.htr-games-page #contact-us-section .section-title {

  color: var(--htr-navy) !important;

}

.htr-games-page #contact-us-section a:not(.btn) {

  color: var(--htr-blue);

}


/* =========================================================
   TABLETS
========================================================= */

@media (min-width: 768px) {

  .htr-games-page .htr-hero-inner {

    width: min(1500px, calc(100% - 56px));

  }

}


/* =========================================================
   DESKTOP HERO
========================================================= */

@media (min-width: 992px) {

  .htr-games-page .htr-hero-inner {

    grid-template-columns:
      minmax(0, .85fr)
      minmax(0, 1.15fr);

    gap: clamp(32px, 4vw, 65px);

  }

  .htr-games-page .htr-hero-title {

    font-size: clamp(2.6rem, 4.6vw, 5.6rem);

  }

}


/* =========================================================
   EXTRA LARGE DISPLAYS
========================================================= */

@media (min-width: 1600px) {

  .htr-games-page .htr-hero-inner {

    width: min(1500px, calc(100% - 96px));

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .htr-games-page .htr-hero {

    padding: 26px 0 30px;

  }

  .htr-games-page .htr-hero-title {

    font-size: clamp(2.4rem, 10vw, 3.6rem);

  }

  .htr-games-page .htr-hero-description {

    font-size: 1rem;

  }

  .htr-games-page .htr-hero-visual {

    border-radius: 9px;

  }

  .htr-games-page .htr-section-title {

    font-size: clamp(2rem, 8.8vw, 3rem);

  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .htr-games-page .game-card {

    transition: none;

  }

  .htr-games-page .game-card:hover {

    transform: none;

  }

}